'use strict';
(function($, window, NS){
	var Bubble = function(args){
		// 参数处理
		var params = {},
			defaults = {
				follow  : null,
				maxWidth: 300, //汽泡最大宽度
				minWidth: 100, //汽泡最小宽度
				evtType : 'hover', //默认触发为鼠标滑过
				padding : '5px 10px',
				fx      : 0, //配置偏移量
				fy      : 20,
				zIndex  : 99
			};
		
		$.extend(params, defaults, args);
		!args.content && (params.content = '没有可显示内容');
		params.fy = 0;

		//构建dom
		var $dom = $([
			'<div id="bubble" class="j-bubble">',
				'<s id="bubble_hook" class="bubble-hook hide"></s>',
				'<div id="bubble_slide" class="hide">',
					'<div id="bubble_content" class="bubble-content" style="max-width:' +params.maxWidth+ 'px;min-width:' +params.minWidth+ 'px;padding:' +params.padding+ '"></div>',
				'</div>',
			'</div>'
		].join(''));
		
		!$('#bubble').length &&  $('body').append($dom);
		
		var $root    = $('#bubble'),
			$btn     = params.follow,
			$hook    = $root.find('#bubble_hook'),
			$slide   = $root.find('#bubble_slide'),
			$content = $root.find('#bubble_content'),
			$window  = $(window);

		var initBubble = function(){
			if(params.evtType === 'hover'){
				$btn.bind({
					mouseenter : function(){
						var viewportWidth  = $window.width(),
							viewportHeight = $window.height(),
							scrollTop      = $window.scrollTop(),
							scrollLeft     = $window.scrollLeft();

						var btnWidth  = $btn.outerWidth(),
							btnHeight = $btn.outerHeight();

						var btnOffset = $btn.offset(),
							btnLeft   = btnOffset.left - scrollLeft,
							btnRight  = viewportWidth  - btnLeft - btnWidth,
							btnTop    = btnOffset.top  - scrollTop,
							btnBottom = viewportHeight - btnTop - btnHeight;
						$content.html(params.content);
						
						var slideWidth  = $slide.outerWidth(),
							slideHeight = $slide.outerHeight();

						var hookWidth  = $hook.outerWidth(),
							hookHeight = $hook.outerHeight();
						
						if(btnTop < btnBottom){//向下显示 如果按钮到视口下面的距离大于到上面的距离就向下显示
							(function(){
								$hook.removeClass().addClass('bubble-hook-down');
								$hook.css({
									left : scrollLeft + btnLeft + (btnWidth-hookWidth) / 2,
									top  : scrollTop  + btnTop + btnHeight + params.fy,
									zIndex : params.zIndex
								}).removeClass('hide');
								var _sl =  scrollLeft + btnLeft + (btnWidth-slideWidth) / 2 +params.fx;
								if(_sl < scrollLeft){ 
									_sl = scrollLeft; 
								}else if(btnLeft + (btnWidth + slideWidth) / 2 > viewportWidth){
									_sl = scrollLeft + (viewportWidth - slideWidth);
								}
								
								$slide.css({
									left:  _sl,
									top : scrollTop  + btnTop + btnHeight + params.fy -1,
									zIndex:params.zIndex-1
								})
								.removeClass().addClass('bubble-slide-down')
								.removeClass('hide');
							})();
						}else {//向上显示
							(function(){
								$hook.removeClass().addClass('bubble-hook-up');
								$hook.css({
									left : scrollLeft + btnLeft + (btnWidth-hookWidth) / 2,
									top  : scrollTop + btnTop - hookHeight - params.fy,
									zIndex : params.zIndex
								}).removeClass('hide');
								var _sl =  scrollLeft + btnLeft + (btnWidth-slideWidth) / 2 +params.fx;
								if(_sl < scrollLeft){ 
									_sl = scrollLeft; 
								}else if(btnLeft + (btnWidth + slideWidth) / 2 > viewportWidth){
									_sl = scrollLeft + (viewportWidth - slideWidth);
								}
								$slide.css({
									left:  _sl,
									top :  scrollTop + btnTop - slideHeight +1 -params.fy,
									zIndex:params.zIndex-1
								})
								.removeClass().addClass('bubble-slide-down')
								.removeClass('hide');
							})();
						}
					}
				});
				
			}
		};

		$(document).ready(function() {
			$window.trigger('resize');
		});
		
		$window.resize(function(){
			initBubble();
		});

		$(document).bind({
			mouseover : function(e){
				setTimeout(function(){
					var $tar = $(e.target);
					if(!$tar.parents('#bubble').length && !$tar.hasClass('j-bubble-btn')) {
						$hook.css({
							left:0
						}).addClass('hide');
						$slide.css({
							left :0
						}).addClass('hide');
					}
				},0);
			}
		})
	}

	//暴露接口
	NS.bubble = function(args){
		new Bubble(args);
	}
})(jQuery, this, this.L=this.L||{});